<template>
  <section>
    <el-popover placement="bottom-start"
                width="200"
                trigger="click">
      <div class="content_box">
        <el-button type="text"
                   class="cost-title">补充费用明细</el-button>
        <template v-for="(ele, index) in surchargeData">
          <div :key="`${ele.type}` + index"
               class="cost-list">
            <span>{{ ele.typeName }}</span>
            <span>{{ ele.money ? thousandDigit(ele.money, 2) : 0 }} </span>
            <el-popover v-if="ele.remarks"
                        placement="right-start"
                        width="200"
                        trigger="hover">
              {{ele.remarks}}
              <icon-svg slot="reference"
                        class-name="iconClass pointer"
                        icon-name="tishi1" />
            </el-popover>
            <span v-else>--</span>
          </div>
        </template>
      </div>
      <icon-svg slot="reference"
                class-name="iconClass pointer"
                icon-name="tishi1" />
    </el-popover>
  </section>
</template>

<script>
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "SurchargeEntry",
  props: {
    surchargeFees: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    surchargeData () {
      return this.surchargeFees
    }
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    }
  }
};
</script>
<style lang="scss" scoped>
.content_box {
  max-height: 300px;
  overflow-x: hidden;
  padding: 0 15px;
}
.cost-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--prev-color-text-ashes);
}
.cost-title {
  color: #000;
  margin-bottom: 10px;
}
</style>
